<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
      <style>
      body{margin: 0;background-color: #fff}
      h1,h2,h3,h4,h5,h6{font-weight: normal;}
    section{padding:20px 0px;box-sizing: border-box;;width: 100%}
    section .col{margin-bottom: 20px;width: 100%;padding-left: 15px;padding-right: 15px;position: relative;;box-sizing:border-box;padding-bottom: 20px;border-bottom:5px solid #F5F5F5;position: relative;}
    section .col h4{font-size: 13px;line-height: 14px;color: #333;margin-bottom:14px;margin: 0}
    section .col h5{font-size: 12px;color: #999;line-height: 13px; }
    section .col .time h6{margin: 0;font-size:12px;line-height:12px;color: #ccc;position: absolute;right:15px;top: 3px;}
    section .col .input button{height: 21px;background-color: rgba(0,0,0,0);text-align: center;line-height: 21px;border:1px solid #F8F8FA;display: inline-block;;margin-right: 5px;padding:0px 8px;box-sizing: border-box;color: #999;text-transform: uppercase;}
      </style>
  </head>
  <body>
<section id="joinitem">
  <div v-for="site in joinitema">
    <div class="col"  title="{{site.id}}" @click="show_cyxm(site.id)">
      <h4>{{site.name}}</h4>
      <div class="time"><h6>距您{{site.juli}}KM</h6></div>
    </div>
  </div>
</section>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
      <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript">
      apiready = function(){
         joinitem = new Vue({
                   el: '#joinitem',
                      data: {
                        joinitema: [
                                 {id:1 ,name:"招中挖(10~20吨)师傅",juli:"100km"},
                               ],
                      },
                 })

      sele = api.pageParam.sele;
      name = api.pageParam.name;
        ajax();
                  console.log(api.pageParam.sele);
                  console.log(api.pageParam.name);
      };
      var joinitem,sele,name;

     function show_cyxm(id){
      console.log(sele);
       if(sele=="jy"){
         api.openFrame({
             name: 'show_zhfw',
             url: 'widget://html/zhfw/show_zhfw.html',
             rect: {
                 x: 0,
                 y: 0,
                 w: 'auto',
                 h: 'auto'
             },animation:{
               type:"push",                //动画类型（详见动画类型常量）
                 subType:"from_right",       //动画子类型（详见动画子类型常量）
                 duration:500                //动画过渡时间，默认300毫秒

             },
             pageParam: {
                 id: id
             },
             bounces: false,
             bgColor: 'rgba(0,0,0,0)',

         });
       }else if(sele="wx"){
         api.openFrame({
             name: 'show_zhfw',
             url: 'widget://html/zhfw/show_zhfw.html',
             rect: {
                 x: 0,
                 y: 0,
                 w: 'auto',
                 h: 'auto'
             },animation:{
               type:"push",                //动画类型（详见动画类型常量）
                 subType:"from_right",       //动画子类型（详见动画子类型常量）
                 duration:500                //动画过渡时间，默认300毫秒

             },
             pageParam: {
                 id: id
             },
             bounces: false,
             bgColor: 'rgba(0,0,0,0)',

         });
       }else if(sele="tc"){
         api.openFrame({
             name: 'show_zhfw',
             url: 'widget://html/zhfw/show_zhfw.html',
             rect: {
                 x: 0,
                 y: 0,
                 w: 'auto',
                 h: 'auto'
             },animation:{
               type:"push",                //动画类型（详见动画类型常量）
                 subType:"from_right",       //动画子类型（详见动画子类型常量）
                 duration:500                //动画过渡时间，默认300毫秒

             },
             pageParam: {
                 id: id
             },
             bounces: false,
             bgColor: 'rgba(0,0,0,0)',

         });
       }else  if(sele="xm"){
         api.openFrame({
             name: 'show_xmxq',
             url: 'widget://html/xmxq/show_xmxq.html',
             rect: {
                 x: 0,
                 y: 0,
                 w: 'auto',
                 h: 'auto'
             }
             ,animation:{
               type:"push",                //动画类型（详见动画类型常量）
                 subType:"from_right",       //动画子类型（详见动画子类型常量）
                 duration:500                //动画过渡时间，默认300毫秒

             },
             pageParam: {
                 id: id
             },

             bounces: false,
             bgColor: 'rgba(0,0,0,0)',
             vScrollBarEnabled: true,
             hScrollBarEnabled: true
         });
       }else if(sele="js"){
         api.openWin({
             name: 'show_jishou',
             url: 'widget://html/jishou/show_win.html',
             pageParam: {
                 id:id
             }
         });

       }
     }



     function ajax(){
       api.ajax({
           url: $api.getStorage("backapi")+'/index.php?c=home&m=search&uid='+$api.getStorage("member"),
           method: 'post',
           data: {
               values: {
                   name: name,
                   sele:sele
               }
           }
       },function(ret, err){
           if (ret) {
               console.log( JSON.stringify( ret ) );
               joinitem.joinitema = ret.status;
           } else {
               console.log( JSON.stringify( err ) );
           }
       });

     }




  </script>
  </html>
